﻿
@{
    ViewData["Title"] = "Repository";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item active" aria-current="page">Plugins</li>
    </ol>
</nav>

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link" href="/Plugins/Index" tabindex="-1">本地插件</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true" href="/Plugins/Repository">远程可用插件</a>
    </li>
</ul>

<ul class="list-group list-group-flush">
    @foreach (var group in ViewBag.AvailablePlugins)
    {
    <li class="list-group-item">
        <h3>@group.Key</h3>
        @foreach (var item in group)
        {
            <div>
                <h4>
                    <span>
                        @item.Platform
                    </span>
                    &nbsp;
                    <span>@item.Version</span>

                    <button type="button" class="btn btn-link" data-name="@item.Name" data-version="@item.Version" data-platform="@item.Platform" data-remoteurl="@item.RemoteUrl">
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display:none"></span>
                        Download
                    </button>

                </h4>

                <p>
                    @item.Description
                </p>
            </div>
        }

    </li>
    }

</ul>

@section Scripts{

    <script>

        $('.list-group-item button').on('click', function () {
            var config = {
                name: $(this).attr('data-name')
                , version: $(this).attr('data-version')
                , remoteurl: $(this).attr('data-remoteurl')
                , platform: $(this).attr('data-platform')
            }
            $(this).attr("disabled")
            $(this).find('span').show()
            var obj = this;
            $.post("/Plugins/DownloadPlugin", config, function (res) {
                if (res.code == 1) {
                    checkDownloadState(obj, config.name, config.platform);
                }
            });
        })

        function checkDownloadState(obj, name,platform) {
            $.get("/Plugins/GetDownloadState", { pluginname: name, platform: platform }, function (res) {
                if (res.code == 1) {
                    $(obj).text("success!");
                }
                else {
                    setTimeout(function () {
                        checkDownloadState(obj, name)
                    }, 3000)
                }
            });
        }


    </script>

}